<template>
  <div class="MoneyWrap">
       <!--成交中心头部-->
     <div class="MoneyHeader">统计时间：<span>2019-07-25 20:24</span></div>
     <!--成交中心第二块-->
     <div class="MoneyTwo">
         账户资金
     </div>
     <div class="content">
         <div class="content_fir">提交保证金</div>
         <div class="content_sec">
           <div class="up">
             投保人：<span class="up_text">{{name}}</span>
           </div>
           <div class="up">
             投保金额：<span class="up_text">{{money}}元</span>
           </div>
         </div>
        <!-- <div class="deal">
            <div class="deal">
              <el-checkbox v-model="checked"></el-checkbox>
              我已阅读并同意保险保证金
              <span class="deal_blue" @click="deal">
                《资金保证金协议》 重要告知
              </span>
            </div>
         </div> -->
         <div class="pay" @click="pay">
           立即支付
         </div>
     </div>
     <!-- 遮罩层 -->
     <div style="overflow: hidden;">
        <!-- 支付选择平台方式支付 -->
        <div class="mask" v-if="banner"></div>
        <div class="mask_content" v-if="banner">
            <div class="msk_top">选择二维码支付<i class="el-icon-close msk_tr" @click="closePay"></i></div>
            <hr style="border-bottom:1px #EDEDED solid ;" />
            <div class="msk_bt"><img @click="aliPay" class="crous" src="../../assets/img/shopCenter/alipay.png" alt=""/></div>
            <div class="msk_btt"><img @click="weiPay" class="crous"  src="../../assets/img/shopCenter/weixinpay.png" alt=""/></div>
        </div>
        <!-- 支付宝 -->
        <div class="mask" v-if="ali" @click="clos"></div>
        <div class="ali" v-if="ali">
            <div class="ali_top"><img class="tu" src="../../assets/img/shopCenter/alicode.png" alt=""/></div>
            <div class="ali_pay">支付金额：<span class="ali_num">{{rmb}}</span>元</div>
            <div class="ali_code"></div>
            <div class="ali_btm">打开支付宝选择左上角扫一扫</div>
        </div>
        <!-- 微信支付 -->
        <div class="mask" v-if="wei" @click="clos"></div>
        <div class="wei" v-if="wei">
            <div class="wei_top"><img class="tu" src="../../assets/img/shopCenter/weicode.png" alt=""/></div>
            <div class="ali_pay">支付金额：<span class="ali_num">{{rmb}}</span>元</div>
            <div class="ali_code"></div>
            <div class="ali_btm">打开微信选择右上角扫一扫</div>
        </div>
     </div>
   </div>
</template>

<script>
  export default {
      name: "deposit",
      data(){
          return {
              name:'1321355646131zzxc',/* 投保人 */
              money:'1000.00',
              // checked: true,
              banner:false,/* 支付方式遮罩开关 */
              ali:false,
              wei:false,
              rmb:'1000.00'
          }
      },
      methods: {
        // deal(){
        //   alert("协议")
        // },
        //支付
        pay(){
          this.banner=!this.banner;
          // if(this.checked){
          // }else{
          //   this.$message.closeAll();
          //   this.$message({
          //       message: '请勾选已阅读协议!',
          //       type: 'warning'
          //   });
          // }
        },
        //关闭支付遮罩层
        closePay(){
          this.banner=false;
        },
        //打开支付宝付款码
        aliPay(){
          let _that=this;
          this.banner=false;
          this.ali=!this.ali;
          setTimeout(function(){
             _that.$router.push('/SAccountCapital/subSuccess');
          },1000)
        },
        //打开微信付款码
        weiPay(){
        this.banner=false;
          this.wei=!this.wei;
        },
        //关闭付款码
        clos(){
           this.ali=false;
           this.wei=false;
        },
        //扫码支付成功跳转
         success(){
            this.$router.push('/SAccountCapital/subSuccess');
         }
      },
      mounted(){
      }
  }
</script>

<style scoped>
  .MoneyWrap{
       width:1015px;
   }
   .MoneyHeader{
       height:33px;
       line-height:33px;
       background:#FFFFFF;
       font-size:14px;
       font-weight:400;
       color:#1296DB;
       text-indent: 28px;
   }
   .MoneyHeader span{
       color:#1296DB;
   }
  /* 第二块 */
     .MoneyTwo{
         height:40px;
         line-height: 40px;
         background:#FFFFFF;
         font-size:19px;
         font-weight:400;
         color:rgba(0,0,0,1);
         text-indent: 28px;
         margin: 20px 0 20px;
         border-bottom:1px #FB6451 solid ;
     }
    /* 内容 */
    .content{
      width:100%;
      height:370px;
      background: #FFFFFF;
      font-family:"PingFang-SC-Bold";
      padding-top:50px;
    }
    .content_fir{
      font-size:24px;
      font-weight:bold;
      color:rgba(51,51,51,1);
      margin-left: 40px;
    }
    .content_sec{
      margin-top: 40px;
      font-size:16px;
      font-weight:bold;
      color: #333333;
      margin-left:100px ;
    }
    .content_sec .up{
      line-height:36px;
    }
    .content_sec .up .up_text{
      color: #EF3015;
    }
    .deal{
      margin:40px 0 0 50px;
      font-size:16px;
      font-weight:400;
      color:rgba(51,51,51,1);
    }
    .deal .deal_blue{
      cursor: pointer;
      color: #00AAEE;
    }
    .pay{
      text-align: center;
      width: 196px;
      line-height: 52px;
      background: #FF6600;
      font-size:24px;
      font-family:"PingFang-SC-Bold";
      font-weight:bold;
      color:rgba(255,255,255,1);
      border-radius:5px;
      margin:70px 0 0 100px;
      cursor: pointer;
    }
    /* 灰层遮罩 */
    .mask{
      background: rgba(0, 0, 0, 0.3);
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 888;
    }
    /* 支付遮罩样式 */
    .mask_content{
      background: #FFFFFF;
      width:850px;
      height: 230px;
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 88888;
      transform: translate(-50%, -50%);
    }
     .mask_content .msk_top{
       line-height: 56px;
        font-size:16px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        color:rgba(0,0,0,1);
        margin-left: 30px;
     }
      .mask_content .msk_tr{
        margin-left: 672px;
        width: 12px;
        height: 12px;
        color: #B3B3B3;
      }
      .mask_content .msk_bt{
        margin:30px 0 0 30px ;
      }
      .mask_content .msk_btt{
         margin:20px 0 0 30px ;
      }
      .mask_content .crous{
        cursor:pointer;
      }
      /* 阿里扫码 */
      .ali, .wei{
        background: #FFFFFF;
        border-radius: 6px;
        width:372px;
        height: 445px;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 88888;
        transform: translate(-50%, -50%);
        text-align: center;
      }
      .ali_pay{
        font-size:22px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        color:rgba(0,0,0,1);
        line-height:100px;
      }
       .ali_num{
        color: #EF3015;
      }
       .ali_code{
        margin: 0 auto;
        width: 151px;
        height: 151px;
        background: #000000;
      }
      .ali_btm{
        font-size:14px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        margin-top: 55px;
        color:rgba(0,0,0,1);
      }
</style>
